var vue = new Vue({
    el:"#app",
    data:{
        totalMoney : 0,
        productList:[],
        checkAllFlag:false,
        delFlag:false,
        currentProduct:{}

    },
    filters:{
        formatMoney:function (value) {
            return " ￥" + value.toFixed();
        },
    },
    mounted:function () {
        this.$nextTick(
            () => this.cartView()
        )
    },
    methods:{
        cartView:function () {
            var _this = this;
            axios.get('data/cartData.json')
                .then((res) => {
                    _this.productList = res.data.result.list;
                    // _this.totalMoney = res.data.result.totalMoney;
                    // console.log(res);
                    // console.log(res.data.result);
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        changeMoney:function(product,type){
            if (type>0){
                product.productQuantity ++;
            }else {
                if (product.productQuantity<=1){
                    return;
                }
                product.productQuantity --;
            }
            this.calcTotalPrice();

        },
        selectedProduct:function (item) {

            if (typeof item.checked === 'undefined'){
                // Vue.set(item, "check", true);
                this.$set(item, "checked", true);
            }
            else{
                item.checked = !item.checked;
            }
            this.calcTotalPrice();
            if (item.checked){
                var i = 0;
                for (i;i<this.productList.length;i++){
                    if (this.productList[i].checked!=true){
                        return;
                    }
                }
                this.checkAllFlag = item.checked;
            }else {
                this.checkAllFlag = item.checked;
            }
        },
        checkAll:function (check) {
            this.checkAllFlag = check;
            if (this.checkAllFlag){
                this.productList.forEach( (item,index) => {
                        if (typeof item.checked === 'undefined') {
                            this.$set(item, "checked", true);
                        }
                        else {
                            item.checked = true;
                        }
                    }
                )
            }else {
                this.productList.forEach( (item,index) => {
                    if (typeof item.checked === 'undefined') {
                        this.$set(item, "checked", false);
                    }
                    else {
                        item.checked = false;
                    }
                })
            }
            this.calcTotalPrice();
        },
        calcTotalPrice:function () {
            this.totalMoney = 0;
            this.productList.forEach( (item,index) => {
                if (item.checked){
                    this.totalMoney += item.productPrice * item.productQuantity;
                }
            })

        },
        delConfirm:function (item) {
            this.delFlag = true;
            this.currentProduct = item;


        },
        delProduct:function () {
            var index = this.productList.indexOf(this.currentProduct);
            this.productList.splice(index, 1);
            this.delFlag = false;
            this.calcTotalPrice()

        }


    }
});
Vue.filter("money", (value, type) => "￥" + value + type);